<template>
  <div>
    <button class="btn"
            @click="addFn"> <i class="el-icon-circle-plus-outline"></i> 新建</button>

    <!-- 列表------------- -->
    <el-table ref="multipleTable"
              :data="VendintypeList"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">

      <el-table-column prop="num"
                       label="序号"
                       width="120">
      </el-table-column>

      <el-table-column prop="name"
                       label="型号名称"
                       width="200">
      </el-table-column>

      <el-table-column prop="model"
                       label="型号编码"
                       width="200"
                       show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="image"
                       label="设备图片"
                       show-overflow-tooltip>
        <template slot-scope="scope">
          <img :src="scope.row.image"
               alt=""
               class="img">
        </template>
      </el-table-column>

      <el-table-column prop="vmRow"
                       label="货道行"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="vmCol"
                       label="货道列"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="channelMaxCapacity"
                       label="设备容量"
                       show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="operate"
                       label="操作"
                       show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="sp11"
                @click="outerVisibleCarouselFn(scope.$index, scope.row)">修改</span>
          <span class="sp22"
                plain
                @click="outerVisibleCarouselFn1(scope.$index, scope.row)">删除</span>

        </template>
      </el-table-column>
    </el-table>
    <!-- 列表--------------->

    <!-- 新增弹框 -->
    <el-dialog :title="flag ===1 ? '新增设备类型' :'修改设备类型'"
               :visible.sync="dialogVisible"
               width="40%"
               :before-close="handleClose">
      <el-form :model="ruleForm"
               :rules="rules"
               ref="numberValidateForm"
               label-width="100px"
               class="demo-ruleForm">
        <el-form-item label="型号名称："
                      prop="name">
          <el-input v-model="ruleForm.name"
                    placeholder="请输入"
                    maxlength="10"
                    show-word-limit
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="型号编码："
                      prop="model">
          <el-input v-model="ruleForm.model"
                    placeholder="请输入(限制数字、字母、中划线、下划线)"
                    maxlength="15"
                    show-word-limit
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="货道行数："
                      prop="vmRow">
          <el-input-number v-model="ruleForm.vmRow"
                           controls-position="right"
                           placeholder="请输入"
                           :max="10"></el-input-number>
        </el-form-item>
        <el-form-item label="货道列数："
                      prop="vmCol">
          <el-input-number v-model="ruleForm.vmCol"
                           controls-position="right"
                           placeholder="请输入"
                           :max="10"></el-input-number>
        </el-form-item>
        <el-form-item label="货道容量："
                      prop="channelMaxCapacity">
          <el-input-number v-model="ruleForm.channelMaxCapacity"
                           controls-position="right"
                           placeholder="请输入"
                           :max="10"></el-input-number>
        </el-form-item>
        <el-form-item label="设备图片："
                      prop="img">

          <!-- 上传图片 -->
          <el-upload action="#"
                     ref="upload"
                     list-type="picture-card"
                     :on-change="handleChange"
                     :auto-upload="false">

            <span class="img99"
                  ref="img999"
                  :class="flag ===1 ? 'displaynone' :''"><img :src="imgdata"
                   alt=""></span>

            <i slot="default"
               class="el-icon-plus"
               ref="imgbox"></i>

            <div slot="file"
                 slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail"
                   ref="imgbox1"
                   :src="imgdata"
                   alt="">
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>

                <span v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible1">
            <img width="100%"
                 :src="dialogImageUrl"
                 alt="">
          </el-dialog>
          <!-- 上传图片 -->

        </el-form-item>
        <el-form-item class="footer">

          <el-button @click="resetForm('numberValidateForm')">取消</el-button>
          <el-button type="primary"
                     @click="submitForm('numberValidateForm')">提交</el-button>
        </el-form-item>
      </el-form>
      <!-- <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="dialogVisible = false">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
import { mapState } from 'vuex';
import { postVendintype, putVendintype } from '@/api/fixing/fixingType';
export default {
  data () {
    return {
      ruleForm: {
        name: '',
        model: '',
        vmRow: '',
        vmCol: '',
        channelMaxCapacity: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入型号名称', trigger: 'blur' },
        ],
        model: [
          { required: true, message: '请输入型号编码', trigger: 'blur' },
          { min: 3, max: 9, message: '长度在 3 到 9 个字符', trigger: 'blur' }
        ],
        vmRow: [
          { type: 'date', required: true, message: '请输入货道行数', trigger: 'change' }
        ],
        vmCol: [
          { type: 'date', required: true, message: '请输入货道列数', trigger: 'change' }
        ],
        channelMaxCapacity: [
          { type: 'date', required: true, message: '请输入货道容量', trigger: 'change' }
        ],
        img: [
          { required: true, message: '请输入图片', trigger: 'change' }
        ],
      },
      flag: 1,
      tableData: [],
      Fmdatasj: [],
      currentPage1: 1000,
      loading: false,
      num: "",
      dialogVisible: false,
      dialogVisible1: false,
      dialogImageUrl: '',
      disabled: false,
      imageUrl: '',
      fileList: [],
      num1: '',
      num2: '',
      num3: '',
      imgdata: '',  //需要的图片地址
      typeId: ''
    }
  },
  methods: {
    //图片改变
    async handleChange (file) {
      this.$nextTick(() => {
        this.$refs.imgbox.parentNode.style.display = "none"
      })
      const isJPG = file.raw.type === 'image/jpeg';
      const isLt2M = file.size / 1024 - 200 < 100;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
        return
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
        return
      }
      const formData = new FormData()
      formData.append('fileName', file.raw);
      // 图片上传
      const res = await request.post("/api/vm-service/sku/fileUpload", formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      })
      this.imgdata = res.data
    },
    //移除图片
    handleRemove (file) {
      this.$refs.upload.clearFiles();
      this.$refs.imgbox.parentNode.style.display = "inline-block"

    },
    //放大图片
    handlePictureCardPreview (file) {
      this.dialogVisible1 = true;
    },
    //图片

    //确认
    async submitForm (formName) {
      if (this.flag === 1) {
        try {
          const res = await postVendintype({
            ...this.ruleForm,
            image: this.imgdata
          })
          console.log(res);
           this.$message.success('添加成功')
          this.dialogVisible = false
          this.$refs.numberValidateForm.resetFields()
          this.ruleForm.name = ''
          this.ruleForm.model = ''
          this.ruleForm.vmRow = ''
          this.ruleForm.vmCol = ''
          this.ruleForm.channelMaxCapacity = ''
          this.$store.dispatch('fixingtype/getVendintype_vuex')
          this.imgdata = ''
        } catch (e) {
          this.$message.error(e.response.data)
        }
      } else if (this.flag === 2) {
        try {
          const res = await putVendintype({
            ...this.ruleForm,
            image: this.imgdata,
            typeId: this.typeId
          })
          console.log(res);
          this.$message.success('修改成功')
             this.dialogVisible = false
          this.$refs.numberValidateForm.resetFields()
          this.ruleForm.name = ''
          this.ruleForm.model = ''
          this.ruleForm.vmRow = ''
          this.ruleForm.vmCol = ''
          this.ruleForm.channelMaxCapacity = ''
          this.$store.dispatch('fixingtype/getVendintype_vuex')
          this.imgdata = ''
        } catch (e) {
          console.log(e.response.data);
          this.$message.error(e.response.data)
        }
      }
    },
    //取消
    resetForm (formName) {
      this.dialogVisible = false
      this.$refs[formName].resetFields();
    },


    handleClose (done) {//新增关闭要做的事
      this.ruleForm.name = ''
      this.ruleForm.model = ''
      this.ruleForm.vmRow = ''
      this.ruleForm.vmCol = ''
      this.ruleForm.channelMaxCapacity = ''
      this.dialogVisible = false
    },
    handleSelectionChange (val) {
      console.log(val);

    },
    //新增
    addFn () {
      this.flag = 1

      this.$nextTick(() => {
        console.log(this.$refs.img999);
      })
      this.dialogVisible = true
    },
    //修改
    outerVisibleCarouselFn (index, rouw) {
      this.dialogVisible = true
      this.typeId = rouw.typeId
      this.imgdata = rouw.image
      console.log(rouw);
      this.flag = 2
      this.ruleForm.name = rouw.name
      this.ruleForm.model = rouw.model
      this.ruleForm.vmRow = rouw.vmRow
      this.ruleForm.vmCol = rouw.vmCol
      this.ruleForm.channelMaxCapacity = rouw.channelMaxCapacity



    },

    //删除
    outerVisibleCarouselFn1 () {
      this.$notify.info({
        title: '提示',
        message: '演示系统不支持此操作'
      });
    },
  },
  computed: {
    ...mapState('fixingtype', ['VendintypeList'])
  },
  created () {

  }
}
</script>
<style lang="less" scoped>
.displaynone {
  display: none !important;
}
.img99 {
  display: inline-block;
  position: absolute;
  left: 160px;
  width: 148px;
  height: 148px;
  img {
    width: 148px;
    height: 148px;
  }
}
.btn {
  height: 38px;
  line-height: 38px;
  text-align: center;
  width: 80px;
  border: none;
  color: #fff;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  border-radius: 4px;
  font-weight: 400px;
  font-size: 13px;
  cursor: pointer;
}
.img {
  display: block;
  width: 24px;
  height: 24px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
  background: #f3f6fb;
  border: 1px solid #f3f6fb;
}
.sp1 {
  font-size: 14px !important;
  color: #dbdfe5 !important;
}
.sp11 {
  color: #5f84ff;
  margin-left: 8px;
  cursor: pointer;
}
.sp22 {
  color: red;
  margin-left: 12px;
  cursor: pointer;
}
.sp9 {
  color: #fff;
  width: 50px;
  border-radius: 10px;
  font-size: 12px;
  display: inline-block;
  text-align: center;
  line-height: 22px;
  height: 22px;
  background: #ff665f linear-gradient(135deg, #ffb043, #ffc020);
}
.sp99 {
  height: 23px;
  padding: 3px 12px;
  background: #ff665f linear-gradient(135deg, #3fc997, #4bda98);
  border-radius: 10px;
  text-align: center;
  margin-left: 10px;
  font-size: 12px;
  color: #fff;
  line-height: 23px;
}
::v-deep {
  .el-button--primary {
    margin-right: 90px !important;
    align-items: center;
    width: 80px !important;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: none;
  }
  .el-button--default {
    margin-right: 30px !important;
    align-items: center;
    width: 80px !important;
    height: 36px;
    padding: 0;
    background-color: #fbf4f0 !important;
    border: none;
    color: #655b56 !important;
  }
  .footer {
    margin-top: 44px !important;
    text-align: center !important;
  }
  .el-input-number.is-controls-right .el-input-number__increase {
    border-radius: 0 4px 0 0;
    border-bottom: 1px solid #dcdfe6;
    right: 76px !important;
  }
  .el-input-number.is-controls-right .el-input-number__decrease {
    right: 76px !important;
    bottom: 1px !important;
  }
  .el-input-number {
    width: 100% !important;
  }
  .el-input {
    width: 87% !important;
  }
  .el-pagination .btn-prev {
    float: right;
    background-color: #d5ddf8 !important;
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
  }
  .el-pagination .btn-next {
    float: right;
    background-color: #d5ddf8 !important;
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
  }
  .el-pagination {
    padding: 20px 20px;
    background-color: #fff;
  }
  .el-table--fit {
    padding: 0px 20px;
    margin-top: 20px;
  }
}
</style>